<!--<template>-->
<!--  <div class="container">-->
<!--    <van-skeleton  title :row="100" :loading="!state.init">-->
<!--      <onepagecard  class="onepage-card" height="400px" />-->
<!--      <br/>-->
<!--      <br/>-->
<!--      <van-slider v-model="value" active-color="#ee0a24" @drag-start="changePage" @drag="changePage">-->
<!--        <template #button>-->
<!--          <div class="custom-button">{{ page }}</div>-->
<!--        </template>-->
<!--      </van-slider>-->
<!--      <div class="footer">-->
<!--        &lt;!&ndash;      <van-pagination&ndash;&gt;-->
<!--        &lt;!&ndash;          v-model="currentPage"&ndash;&gt;-->
<!--        &lt;!&ndash;          :total-items="125"&ndash;&gt;-->
<!--        &lt;!&ndash;          :show-page-size="3"&ndash;&gt;-->
<!--        &lt;!&ndash;          force-ellipses&ndash;&gt;-->
<!--        &lt;!&ndash;      />&ndash;&gt;-->
<!--      </div>-->
<!--    </van-skeleton>-->
<!--  </div>-->
<!--</template>-->

<!--<script lang="ts">-->
<!--import onepagecard from "./mobile_card.vue";-->
<!--import {mapState, mapMutations, useStore} from "vuex";-->
<!--import {IClub, IMobileStore, IPagination} from "../../../interface"-->
<!--import {useRouter} from "vue-router";-->
<!--import {reactive, ref} from "vue";-->
<!--import {cardValues} from "@/lib/uiInterface.ts";-->
<!--import {Notify} from "vant";-->

<!--export default {-->
<!--  setup() {-->
<!--    const value = ref(1);-->
<!--    const store = useStore();-->
<!--    const router = useRouter();-->
<!--    let max = 0;-->
<!--    const state = reactive({-->
<!--      init: false,-->
<!--      page: 1,-->
<!--      card_value: [] as IClub[]-->
<!--    })-->
<!--    if (!!router.currentRoute.value.query.id && parseInt(router.currentRoute.value.query.id.toString()) != NaN) {-->
<!--      state.page = parseInt(router.currentRoute.value.query.id.toString());-->
<!--    } else {-->
<!--      state.page = 1-->
<!--    }-->
<!--    /**-->
<!--     * 页面加载完成 即社团数据加载完成-->
<!--     */-->
<!--    const loadPage = async function () {-->
<!--      if (!state.init) {-->
<!--        let flag: boolean = true;-->
<!--        let clubs: IClub[] = [];-->
<!--        let index: number = 0;-->
<!--        let size: number = 20;-->
<!--        while (flag) {-->
<!--          let obj: any = await fetch("api/club/?page=" + index + "&size=" + size)-->
<!--          let result: IPagination<any> = await obj.json();-->
<!--          for (const resultElement of result.items) {-->
<!--            state.card_value.push({-->
<!--              id: resultElement.id,-->
<!--              desc: resultElement.introduction,-->
<!--              name: resultElement.name,-->
<!--              avatar: resultElement.favicon.path-->
<!--            });-->
<!--          }-->
<!--          if (!result.page_info.has_next_page) {-->
<!--            flag = false;-->
<!--          }-->
<!--        }-->
<!--        state.init=true;-->
<!--      }-->
<!--    }-->
<!--    loadPage();-->
<!--    if (store.state.club_manage.init) {-->
<!--      max = store.state.club_manage.clubs.length;-->
<!--    }-->
<!--    const currRoute = useRouter().currentRoute;-->
<!--    // console.log(store.state.club_manage.clubs)-->
<!--    if (!!currRoute.value.query.id) {-->
<!--      let num: number = parseInt(currRoute.value.query.id.toString());-->
<!--      if (num < 1) {-->
<!--        store.commit("setPage", 1);-->
<!--        // console.log(store.state.club_manage.clubs.length)-->
<!--        value.value = 1 * (100 / store.state.club_manage.clubs.length);-->
<!--      } else {-->
<!--        store.commit("setPage", num);-->
<!--        // console.log(store.state.club_manage.clubs.length)-->
<!--        value.value = num * (100 / store.state.club_manage.clubs.length);-->
<!--      }-->
<!--    } else {-->
<!--      store.commit("setPage", 1)-->
<!--    }-->

<!--    return {-->
<!--      max, value, store , state-->
<!--    }-->
<!--  },-->
<!--  mounted() {-->
<!--    // this.max = this.clubs.length;-->
<!--  },-->
<!--  components: {-->
<!--    onepagecard,-->
<!--  },-->
<!--  computed: {-->
<!--    ...mapState(["page"]),-->
<!--  },-->
<!--  methods: {-->
<!--    ...mapMutations(["setPage"]),-->
<!--    changePage: function () {-->
<!--      let p = Math.ceil(((this as any).value * (this as any).max) / 100);-->
<!--      if (p < 1) {-->
<!--        p = 1-->
<!--      } else {-->
<!--        this.setPage(p);-->
<!--      }-->
<!--      (this as any).$router.push({-->
<!--        path: "/ground",-->
<!--        query: {-->
<!--          id: p,-->
<!--        },-->
<!--      });-->
<!--    },-->
<!--  },-->
<!--  watch: {-->
<!--    // value: function () {-->
<!--    //   let p = Math.floor(((this as any).value * (this as any).max) / 100);-->
<!--    //   // console.log(p)-->
<!--    //   if (p < 1) {-->
<!--    //     (this as any).setPage(1);-->
<!--    //   } else {-->
<!--    //     (this as any).setPage(p);-->
<!--    //   }-->
<!--    // },-->
<!--  },-->
<!--};-->
<!--</script>-->

<!--<style scoped>-->
<!--.container {-->
<!--  display: flex;-->
<!--  justify-content: flex-start;-->
<!--  align-items: center;-->
<!--  flex-direction: column;-->
<!--  width: 100%;-->
<!--  height: 100%;-->
<!--  padding: 0 10px;-->
<!--}-->

<!--.custom-button {-->
<!--  width: 26px;-->
<!--  color: #fff;-->
<!--  font-size: 10px;-->
<!--  line-height: 18px;-->
<!--  text-align: center;-->
<!--  background-color: #ee0a24;-->
<!--  border-radius: 100px;-->
<!--}-->

<!--.onepage-card {-->
<!--  margin-top: 32px;-->
<!--}-->

<!--.van-slider {-->
<!--  margin-top: 15px;-->
<!--  margin-bottom: 70px;-->
<!--}-->
<!--</style>-->
